<template>
  <el-drawer
    ref="recever"
    title="设置接收人"
    :visible.sync="drawer"
    :direction="direction"
    :before-close="handleClose"
    :size="size"
  >
    <div class="transfer">
      <el-transfer
        ref="receverselect"
        v-model="value"
        :props="{
          key: 'own_id',
          label: 'own_nickname',
        }"
        :data="data"
        :titles="titles"
        :right-default-checked="value"
      ></el-transfer>
    </div>
    <div style="padding-top: 10px">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span>设置接收通道</span>
        </div>
        <div class="text item">
          <el-checkbox-group v-model="checkList">
            <el-checkbox label="2">短信</el-checkbox>
            <el-checkbox label="3">邮箱</el-checkbox>
            <el-checkbox label="1" disabled title="暂不支持微信推送">
              微信
            </el-checkbox>
            <el-checkbox label="4" disabled title="暂不支持APP应用内推送">
              APP应用内
            </el-checkbox>
          </el-checkbox-group>
        </div>
      </el-card>
    </div>
    <div class="surebutton">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-drawer>
</template>

<script>
  import { getList } from '@/api/sysaccount.js'
  import { addMessageReciver } from '@/api/SysMessageType'
  export default {
    name: 'RoleManagementEdit',
    data() {
      return {
        checkList: [],
        data: [],
        value: [],
        drawer: false,
        direction: 'rtl',
        size: '40%',
        titles: ['可选账号', '已选账号'],
        form: {
          msgtypeid: '',
          userids: '',
        },
        rules: {},
        title: '',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      handleClose(done) {
        done()
      },
      showEdit(row) {
        this.drawer = true
        this.form.id = row.id
        this.fetchData()
      },
      close() {
        this.$refs['recever'].closeDrawer()
      },
      async save() {
        console.log(this.checkList)
        return
        if (this.value) {
          const { msg } = await addMessageReciver({
            msgtypeid: this.form.id,
            userids: this.value.join(),
          })
          this.$baseMessage(msg, 'success')
          this.$refs['recever'].closeDrawer()
        } else {
          this.$baseMessage('请选择账号', 'fail')
          return false
        }
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await getList({ all: '1', msgid: this.form.id })
        this.data = data.list
        this.value = data.exuser
        //console.log(['158', '159', '165', '166'])
        //console.log(data.exuser)
        //this.total = data.pageInfo.data.totalRows
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style scoped>
  .transfer {
    margin-left: 50px;
  }
  .surebutton {
    margin-top: 40px;
    text-align: center;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: '';
  }
  .clearfix:after {
    clear: both;
  }

  .box-card {
    width: 99%;
  }
</style>
